/*
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2022-10-08 15:16:57
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-10-17 11:03:25
 * @FilePath: \vue-event\src\utils\request.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// 基于axios封装
import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { Message } from 'element-ui'

export const baseURL = 'http://big-event-vue-api-t.itheima.net' // 接口和图片资源的服务器地址

const myAxios = axios.create({
  baseURL: baseURL
})

// 定义请求拦截器
// api里每次调用request都会先走请求拦截器
myAxios.interceptors.request.use(function (config) {
  // 为请求头挂载 Authorization 字段
  if (store.state.token) {
    config.headers.Authorization = store.state.token
  }

  return config
}, function (error) {
  // 请求发起前如果有异常，则直接进入这里
  return Promise.reject(error)
})

// 如果token有, 但是过期了怎么办
// 1. 前端是无法判断token是否过期了的, 所以当某次发请求把token带给后台做验证的时候
// 2. 后台发现token过期了, 则会返回响应状态码401
// 3. 但是你又不确定在哪个请求会401, 所以要用统一的响应拦截器做判断

// 定义响应拦截器
myAxios.interceptors.response.use(function (response) {
  // 响应状态码为 2xx或3xx 时触发成功的回调，形参中的 response 是“成功的结果”
  // return到axios原地promise对象
  return response
}, function (error) {
  // 修改localStorage里的值，刷新让vuex取出错误的值，导致401
  // token过期了,清空vuex
  if (error.response.state === 401) {
    // commit：同步操作，数据提交至 mutations （可用于登录成功后读取用户信息写到缓存里）
    store.commit('updateToken', '')
    store.commit('updateUserInfo', {})
    router.push('/login')
    Message.error('用户身份已过期!')
  }
  // 响应状态码为 4xx或5xx 时触发失败的回调，形参中的 error 是“失败的结果”
  return Promise.reject(error)
})

// 导出自定义函数
export default myAxios
